import React, { Component } from 'react'
import { Descriptions } from 'antd'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { getUserInfoAsync } from '../../../_redux/actions_async'

class ProfilePage extends Component {
  constructor (props) {
    super(props)
    this.state = {
      username: 'Rain 7 yukee',
      email: '1789446861@qq.com',
      name: 'Nan.SS',
      age: 18,
      gender: 0,
      phone: 13593207745,
      department: '技术部',
      registerTime: '2000 0 0 0'
    }
  }

  componentWillMount () {
    this.props.getUserInfoAsync()
  }

  render () {
    const { username, email, name, age, gender, phone, departmentName, registerTime } = this.props.userInfo
    const { userId } = this.props.match.params

    return (
      <div>
        <Descriptions title="我的信息" layout="vertical" bordered
                      extra={<Link to={`/home/${userId}/edit`}>修改个人信息</Link>}
        >
          <Descriptions.Item label="用户名">{username}</Descriptions.Item>
          <Descriptions.Item label="邮箱">{email}</Descriptions.Item>
          <Descriptions.Item label="姓名">{name}</Descriptions.Item>
          <Descriptions.Item label="年龄">{age}</Descriptions.Item>
          <Descriptions.Item label="性别">{['Male', 'Female'][gender]}</Descriptions.Item>
          <Descriptions.Item label="手机号">{phone}</Descriptions.Item>
          <Descriptions.Item label="部门">{departmentName}</Descriptions.Item>
          <Descriptions.Item label="注册时间">{registerTime}</Descriptions.Item>
        </Descriptions>
      </div>
    )
  }
}

ProfilePage.propTypes = {}

ProfilePage = connect(
  ({ $UserInfoState: { userInfo }, $UserState: { userId } }) => ({ userInfo, userId }),
  { getUserInfoAsync }
)(ProfilePage)

export default ProfilePage
